<!DOCTYPE html>
<html>
  <head>
    <style>
div {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
}
    </style>
  </head>
  <body onload="runAfterLayoutAndPaint(repaintTest, true);">
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
      <defs>
        <clipPath id="clip1">
	  <rect width="50" height="50"/>
	</clipPath>

        <clipPath id="clip2">
	  <rect width="50" height="50"/>
	  <rect x="50" y="50" width="50" height="50"/>
	</clipPath>

        <clipPath id="clip3" clipPathUnits="objectBoundingBox">
	  <rect width="0.5" height="0.5"/>
	</clipPath>

        <clipPath id="clip4" clipPathUnits="objectBoundingBox">
	  <rect width="0.5" height="0.5"/>
	  <rect x="0.5" y="0.5" width="0.5" height="0.5"/>
	</clipPath>
      </defs>
    </svg>

    <div style="transform: translate(10px, 10px); width: 200px; height: 200px; top: 0px; left: 0px; background-color: black;"></div>

    <!-- The 4x4 checkerboard should stay well-formed when zoomed -->
    <div style="transform: translate(10px, 10px); top: 0px; left: 0px; -webkit-clip-path: url(#clip1);"></div>
    <div style="transform: translate(60px, 60px); top: 0px; left: 0px; -webkit-clip-path: url(#clip1);"></div>
    <div style="transform: translate(110px, 10px); top: 0px; left: 0px; -webkit-clip-path: url(#clip2);"></div>
    <div style="transform: translate(10px, 110px); top: 0px; left: 0px; -webkit-clip-path: url(#clip3);"></div>
    <div style="transform: translate(60px, 160px); top: 0px; left: 0px; -webkit-clip-path: url(#clip3);"></div>
    <div style="transform: translate(110px, 110px); top: 0px; left: 0px; -webkit-clip-path: url(#clip4);"></div>

    <script>var zoomCount = 4; window.shouldZoomOut = false;</script>
    <script src="../../../resources/run-after-layout-and-paint.js"></script>
    <script src="../resources/testPageZoom.js"></script>
  </body>
</html>
